<template>
    <div ref="viewer" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0"
        data-bind="dxReportViewer: $data"></div>
</template>

<script setup>
import "devextreme/dist/css/dx.light.css";
import "@devexpress/analytics-core/dist/css/dx-analytics.common.css";
import "@devexpress/analytics-core/dist/css/dx-analytics.light.css";
import "@devexpress/analytics-core/dist/css/dx-querybuilder.css";
import "devexpress-reporting/dist/css/dx-webdocumentviewer.css";
import "devexpress-reporting/dist/css/dx-reportdesigner.css";
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useRoute } from 'vue-router'
import ko from 'knockout'
import { PreviewElements, ActionId } from 'devexpress-reporting/dx-webdocumentviewer'
import analyHans from '@/assets/dx-analytics-core.zh-Hans.json'
import reportHans from '@/assets/dx-reporting.zh-Hans.json'

const viewer = ref()
const router = useRoute()

onMounted(() => {
    const reportUrl = router.query?.reportUrl;
    if (!reportUrl)
        reportUrl = 'TestReport';
    console.log("地址:" + reportUrl);
    const viewerOptions = {
        reportUrl: ko.observable(reportUrl), // The URL of a report.
        requestOptions: {
            //host: config.host,
            host: host: import.meta.env.VITE_APP_BASE_API,// 'http://localhost:5000/',
            invokeAction: '/DXXRDV',
        },
        callbacks: {
            CustomizeLocalization: function (s, e) {
                e.LoadMessages(analyHans)
                e.LoadMessages(reportHans)
            },
            CustomizeElements: function (s, e) {
                const panelPart = e.GetById(PreviewElements.RightPanel)
                const index = e.Elements.indexOf(panelPart)
                e.Elements.splice(index, 1)
            },
            CustomizeMenuActions: function (s, e) {
                // Get the page navigation actions and hide them.
                const exportTo = e.GetById(ActionId.ExportTo)
                if (exportTo) exportTo.visible = false
                const fullScreen = e.GetById(ActionId.FullScreen)
                if (fullScreen) fullScreen.visible = false
                const search = e.GetById(ActionId.Search)
                if (search) search.visible = false

                const zoom = e.GetById(ActionId.ZoomSelector)
                if (zoom) {
                    zoom.zoom(1)
                }
            },
        },
    }
    ko.applyBindings(viewerOptions, viewer.value)
})
onBeforeUnmount(() => {
    ko.cleanNode(viewer.value)
})
</script>
